import * as Cesium from '@cesiumjs';
import {
  computed,
  ref,
  toRaw
} from 'vue'
import {
  G3V
} from '@g3x';
import {
  clone,
  combine,
  merge
} from "@g3x/utils";

const $g3vOptions = {
  defaultViewRectangle: G3V.defaultViews.global.china.rectangle,
  viewers: [{
    dom: 'cesium-viewer',
    name: 'viewer1',
    title: 'viewer#01',
    viewer: {
      imagery: { type: 'default', options: { brightness: 1, show: false } },
      imageryProvider: null,
      terrain: { type: 'default', options: { requestVertexNormals: true, requestWaterMask: true } },
      terrainProvider: null,
      shadows: false,
      scene3DOnly: true,
      // sceneMode: Cesium.SceneMode.SCENE2D,
      animation: false
    },
    layers: [
      { type: 'arcgisImagery', options: { brightness: 1, show: true } },
      { type: 'tdtImage', options: { brightness: 1, show: false } },
      { type: 'tdtVector', options: { brightness: 1, show: false } },
      { type: 'tdtTerrain', options: { brightness: 1, show: false } },
      { type: 'osmImagery', options: { brightness: 1, show: false } },
      { type: 'arcgisStreetMap', options: { brightness: 1, show: false } },
      { type: 'bingMapsImagery', options: { brightness: 1, show: false } },
      { type: 'bingMapsAeriaAnno', options: { brightness: 1, show: false } },
      { type: 'bingMapsRoad', options: { brightness: 1, show: false } },
      { type: 'tdtIboMap', options: { brightness: 1, show: true } },
      { type: 'tdtImgAnno', options: { brightness: 1, show: true } },
      { type: 'tdtTerrainAnno', options: { brightness: 1, show: false } },
      { type: 'tdtVecAnno', options: { brightness: 1, show: false } },
      { type: 'tdtVecAnnoEn', options: { brightness: 1, show: false } },
      // { type: 'darkMask', options: { brightness: 1, alpha: 0.9 } },
      { type: 'graticule', options: { brightness: 1, show: true } }

    ],
    globe: {
      depthTestAgainstTerrain: false,
      enableLighting: true //启用以太阳为光源的地球
    },
    bottomContainer: false,
    navigation: {
      // defaultResetView: G3V.defaultViews.global.china.rectangle ,
      defaultResetView: null //flyHome
    },
    shortcutAction: false,
    hideLayers: false
    // },{
    //   dom: "cesium-viewer#2",
    //   name: "viewer2",
    //   title: "viewer 2",
    //   viewer:{
    //     imagery: { type: 'arcgisImagery', options: { brightness: 1, show: true } },
    //     imageryProvider: null,
    //     terrain: { type: 'default', options: { requestVertexNormals: true, requestWaterMask: true } },
    //     terrainProvider: null,
    //     shadows: false,
    //   }
  }]
};

export default {
  props: {},
  data() {
    return {
      g3v: null,
    };
  },
  computed: {
    viewer() {
      const g3v = toRaw(this.g3v)
      return g3v && g3v.viewer$1;
    },
    g3vViewer() {
      const g3v = toRaw(this.g3v)
      return g3v && g3v.g3vViewer$1;
    },
    viewerSource() {
      const {
        viewer
      } = this;
      return {
        viewer
      };
    }
  },
  mounted() {
    this.initViewer();
  },
  beforeUnmount() {},
  unmounted() {
    this.g3v && this.g3v.destroy();
    this.g3v = null;
  },
  methods: {
    g3vOptionsGet(original) {
      return original;
    },
    initViewer() {
      let vm = this;
      const original = clone($g3vOptions)
      const g3vOptions = vm.g3vOptionsGet(original);
      vm.g3v = new G3V(g3vOptions, () => {
        vm.onViewerInited && vm.onViewerInited();
        vm.initEffects && vm.initEffects();
      })
    },
  }
}
